<template>
    <div class="article-item">
        <div class="article-top">
            <p class="title">{{ subject }}</p>
            <img :src="`https://file.ituring.com.cn/SmallCover/${coverKey}`" alt="">
        </div>
        <div class="article-bottom">
            <p class="origin">{{ authorNickName }} · {{ publishDate.substring(0,10) }}</p>
            <span class="tag">{{ tag }}</span> 
        </div>
    </div>
</template>

<script>
export default {
    props:['coverKey','subject','authorNickName','publishDate','tag']
}
</script>

<style lang="scss" scoped>
.article-item{
    padding: 15px 0 ;
    &:nth-last-child(1){
        padding: 15px 0 0;
    }
    .article-top{
        width: 345px;
        display: flex;
        justify-content: space-between;
        p.title{
            font-size: 16px;
            color: var(--title-font-black);
            line-height: 21px;
        }
        img{
            width: 36px;
            height: 36px;
            margin-left: 20px;
            border-radius: 999px;
        }
    }
    .article-bottom{
        width: 345px;
        display: flex;
        justify-content: space-between;
        margin: 8px 0 0;
        p.origin{
            font-size: 14px;
            color: var(--more-font-grey);
            line-height: 21px;
        }
        span.tag{
            font-size: 14px;
            background-color: var(--tag-bg-orange);
            color: var(--tag-font-orange);
            padding: 2px 8px;
            border-radius: 2px;
        }
    }
}
</style>